@inherits MudComponentBase
@inject IStringLocalizer<SharedResource> L
 
<MudBadge Color="Color.Secondary" Dot="true" Overlap="true" Visible="_newNotificationsAvailable">
    <MudMenu Icon="@Icons.Outlined.Notifications" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopCenter" PopoverClass="docs-layout-menu-shadow" ListClass="pa-2 docs-menu-list" LockScroll="true">
        <div class="d-flex justify-space-between align-center px-2">
            <MudText Typo="Typo.subtitle2">@L["Notifications"]</MudText>
            <MudButton Disabled="@(_newNotificationsAvailable == false)" OnClick="MarkNotificationAsRead" StartIcon="@Icons.Filled.DoneAll" Variant="Variant.Text" Color="Color.Primary" Class="ml-16 mr-n2">@L["Mark as read"]</MudButton>
        </div>
        @if (_messages != null && _newNotificationsAvailable)
        {
            @foreach (var (message, isRead) in _messages.Take(5))
            {
                <MudMenuItem Class="px-2 py-0 rounded" Link="@($"/mud/announcements/{message.Id}")">
                    <MudText Typo="Typo.subtitle2">@message.Title</MudText>
                    <MudText Typo="Typo.body2">@($"{message.Authors.FirstOrDefault()?.DisplayName} • {message.PublishDate.ToString("MM/dd/yyyy")}")</MudText>
                </MudMenuItem>
                <MudDivider Class="my-2"/>
            }
        }
        else
        {
            <div class="d-flex justify-center align-center px-2 py-8 relative">
                <MudText Class="mud-text-secondary my-12">@L["Nothing new :("]</MudText>
                <MudBlazorLogo Class="docs-logo-filter mx-16 absolute" Style="filter: grayscale(1) opacity(.05);"/>
            </div>
        }
    </MudMenu>
</MudBadge>

